<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<script>
    /**
     * 1 定义一个函数 move
     * 2 在按钮中添加点击事件 onclick="move()"
     * 3 在move函数内添加代码
     *    3.1找到希望控制的元素  var o = document.getElementById('box');
     *    3.2修改样式 o.style,
     *    color  ---> o.style.color
     *    margin-left  --->   .marginLeft
     *    background-color---> backgroundColor
     *    border-bottom-width----> .borderBottomWidth
     */
</script>
<div id="box" class="box"></div>
<input type="button" value="点我" onclick="move()">
<script>
    function move(){
        var o = document.getElementById('box');
        console.log(o);
//        o.style.display = 'none';
//        o.style.marginLeft = '100px';

    }
</script>
</body>
</html>